<!--  -->
<template>
  <!-- //推荐歌单模块 -->
  <div class="re_container">
    <div class="content">
      <div
        v-for="(item, index) in recomSongList"
        :key="index"
        style="position: relative"
        class="image"
      >
        <div class="image_wrap">
          <el-image @click="ToDetail(item.id)" :src="item.coverImgUrl">
          </el-image>

          <div class="play_img" @click="ToDetail(item.id)">
            <img
              src="@/assets/image/play.svg"
              alt=""
              style="
                width: 50px;
                height: 50px;
                background: #aca8a1;
                border-radius: 100%;
                opacity: 0.8;
              "
            />
          </div>
        </div>
        <div
          style="
            color: white;
            position: absolute;
            top: 5%;
            right: 7%;
            text-shadow: 0px 0px 2px #000000;
          "
        >
          <i class="el-icon-headset"></i>
          {{
            item.playCount >= 10000
              ? (item.playCount / 10000).toFixed(0) + "万"
              : item.playCount
          }}
        </div>

        <span class="name">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  name: "",
  props: {
    recomSongList: [],
  },
  methods: {
    ToDetail(id) {
      this.$store.dispatch("musicPlay/saveSongListId", id);
      this.$router.push("/songListPage/" + id);
    },
  },
};
</script>

<style lang='less' scoped>
.re_container {
  .content {
    display: grid;
    justify-content: space-around;
    grid-template-columns: repeat(auto-fill, 220px);

    .image {
      margin-bottom: 25px;
      .image_wrap {
        position: relative;
        .el-image {
         box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
          border-radius: 10px;
        }
        .play_img {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -25px;
          margin-top: -25px;
          display: none;
          transition: all 1s;
        }
      }
    }
    .image:hover .play_img {
      display: block;
    }
    .name {
      display: block;
      width: 200px;
      font-size: 16px;
      font-weight: 500;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>